<!-- 简易滚动条 -->

<template>
  <vuescroll :ops="config" :class="scrollClass" :style="scrollStyle">
    <slot />
  </vuescroll>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import vuescroll from 'vuescroll/dist/vuescroll-native'
import mixPath from '../mixPath'
import mixForm from '../form/mixForm'

const name = 'EasyScroll'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 组件导入
   */
  components: { vuescroll },

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 宽度样式类
     */
    widthClass: mixForm.computed.itemClass,

    /**
     * 宽度样式对象
     */
    widthStyle: mixForm.computed.itemStyle,

    /**
     * 滚动条配置
     */
    config() {
      const { scrollProps, scrollWideProps, wide, hasX, noY } = this
      const props = wide ? scrollWideProps : scrollProps
      return {
        ...props,
        scrollPanel: { scrollingX: hasX, scrollingY: !noY },
      }
    },

    /**
     * 滚动条样式类
     */
    scrollClass() {
      const { $options, widthClass } = this
      return `CoreWeb-${$options.name} ${widthClass}`
    },

    /**
     * 滚动条样式对象
     */
    scrollStyle() {
      const { widthStyle, height, full, getSize } = this
      const style = CORE.clone(widthStyle || {})
      if (full) style.height = '100%'
      if (height) style.height = getSize(height)
      return style
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听回到顶部
     */
    top() {
      //
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取尺寸
     */
    getSize: mixPath.methods.getSize,
  },
}
</script>
